<!doctype html>
<html lang="en">
  <head>
    {{ partial "head.html" . }}
  </head>

  <body
    class="flex h-max flex-col bg-gray-50 text-base dark:bg-gray-950 dark:text-white"
  >
    <div class="absolute -z-10 w-full">
      <svg
        class="dark:hidden"
        viewBox="0 0 1616 797"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1066.69 797L0 136.789V0H1616V488.038L1066.69 797Z"
          fill="#EFEFF2"
        />
      </svg>
      <svg
        class="hidden dark:block"
        viewBox="0 0 1616 797"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1066.69 797L0 136.789V0H1616V488.038L1066.69 797Z"
          fill="#080B0E"
          fill-opacity="0.3"
        />
      </svg>
    </div>
    {{ partial "header.html" . }}
    <main class="flex min-h-screen w-full flex-col items-stretch self-center">
      <div
        class="flex w-full flex-col items-stretch gap-20 self-center px-4 py-20 xl:w-[1200px]"
      >
        <div
          class="bg-pattern-blue relative overflow-hidden rounded-sm drop-shadow"
        >
          <div
            class="flex h-full flex-col items-start justify-between gap-4 p-8"
          >
            <div class="flex items-center gap-2">
              <span class="icon-svg text-blue dark:text-blue">
                {{ partial "icon" "play_circle" }}</span
              >
              <h1 class="text-2xl">Get Docker</h1>
            </div>
            <p>
              Learn how to install Docker for Mac, Windows, or Linux and explore
              our developer tools.
            </p>
            <a
              href="/get-started/get-docker/"
              class="bg-blue mt-20 flex cursor-pointer items-center gap-2 rounded-sm p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400"
            >
              <span class="icon-svg">{{ partial "icon" "download" }}</span>
              Get Docker
            </a>
          </div>
          <div
            class="absolute right-0 bottom-0 origin-bottom-right scale-50 lg:scale-100"
          >
            <img
              class="dark:hidden"
              alt="Low-fi desktop app"
              src="/assets/images/app-wf-light-1.svg"
            />
            <img
              class="hidden dark:block"
              alt="Low-fi desktop app"
              src="/assets/images/app-wf-dark-1.svg"
            />
          </div>
        </div>

        <div>
          <div class="grid grid-cols-1 gap-4 lg:grid-cols-4">
            <div>
              <a class="h-full" href="/get-started/">
                <div class="section-card">
                  <div class="flex items-center gap-4">
                    <span class="icon-svg text-blue dark:text-blue">
                      {{ partial "icon" "rocket" }}
                    </span>
                    <div>
                      <div class="section-card-title">Get started</div>
                    </div>
                  </div>
                  <div class="section-card-text">
                    Learn Docker basics and the benefits of containerization.
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a class="h-full" href="/guides/">
                <div class="section-card">
                  <div class="flex items-center gap-4">
                    <span class="icon-svg text-blue dark:text-blue">
                      {{ partial "icon" "developer_guide" }}
                    </span>
                    <div>
                      <div class="section-card-title">Guides</div>
                    </div>
                  </div>
                  <div class="section-card-text">
                    Learn how Docker can optimize your development workflows.
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a class="h-full" href="/manuals/">
                <div class="section-card">
                  <div class="flex items-center gap-4">
                    <span class="icon-svg text-blue dark:text-blue">
                      {{ partial "icon" "description" }}
                    </span>
                    <div>
                      <div class="section-card-title">Manuals</div>
                    </div>
                  </div>
                  <div class="section-card-text">
                    Learn how to install, set up, configure, and use Docker
                    products.
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a class="h-full" href="/reference/">
                <div class="section-card">
                  <div class="flex items-center gap-4">
                    <span class="icon-svg text-blue dark:text-blue">
                      {{ partial "icon" "terminal" }}
                    </span>
                    <div>
                      <div class="section-card-title">Reference</div>
                    </div>
                  </div>
                  <div class="section-card-text">
                    Browse the CLI and API documentation.
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="z-10 grid grid-cols-1 gap-20 lg:grid-cols-2">
          <div class="bg-pattern-verde relative rounded-sm p-6 drop-shadow">
            <div
              class="flex h-full flex-col items-start justify-between gap-12"
            >
              <div class="flex flex-col gap-4">
                <h2 class="font-medium">
                  Gen AI catalog
                  {{ partial
                    "components/badge.html" (dict "color" "blue" "content" "New")
                  }}
                </h2>
                <p class="text-xl">
                  Integrate AI solutions into your apps with minimal effort
                </p>
              </div>
              <div class="flex flex-col items-start gap-4 xl:flex-row">
                <a
                  href="https://hub.docker.com/catalogs/gen-ai"
                  class="bg-blue dark:bg-blue rounded-sm p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:hover:bg-blue-500"
                >
                  Explore on Docker Hub
                </a>
                <a
                  href="/docker-hub/image-library/catalogs/"
                  class="bg-blue dark:bg-blue rounded-sm p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:hover:bg-blue-500"
                >
                  Read the docs
                </a>
              </div>
            </div>
            <div
              class="absolute right-0 bottom-0 origin-bottom-right scale-75 md:scale-100"
            >
              <img
                class="dark:hidden"
                alt="Low-fi desktop app"
                src="/assets/images/app-wf-light-2.svg"
              />
              <img
                class="hidden dark:block"
                alt="Low-fi desktop app"
                src="/assets/images/app-wf-dark-2.svg"
              />
            </div>
          </div>
          <div
            class="rounded-sm bg-gradient-to-br from-blue-400 to-blue-200 p-[2px] drop-shadow dark:from-blue-300 dark:to-blue-400"
          >
            <div class="bg-pattern-purple rounded-sm p-6">
              <div class="flex flex-col gap-12">
                <div class="flex flex-col gap-4">
                  <h2 class="font-medium">
                    Docker MCP Catalog and Toolkit
                    {{ partial "components/badge.html" (dict "color" "blue" "content" "Beta") }}
                  </h2>
                  <p class="text-xl">
                  Supercharge your AI applications or agents with secure, containerized tools
                  </p>
                </div>
                <div class="flex flex-col items-start gap-4 xl:flex-row">
                  <a
                    href="/ai/mcp-catalog-and-toolkit/get-started/"
                    class="bg-blue dark:bg-blue rounded-sm p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:hover:bg-blue-500"
                    >Let's get started</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <h2 class="mb-4 text-xl">Browse by section</h2>
          <div
            class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
          >
            {{ range .Params.grid }}
              <div>
                <div class="section-card">
                  <div class="flex items-center gap-4">
                    <span class="icon-svg text-gray dark:text-gray"
                      >{{ partial "icon" .icon }}</span
                    >
                    <div>
                      <div class="section-card-title">{{ .title }}</div>
                    </div>
                  </div>
                  <div class="flex h-full flex-col justify-between gap-4">
                    <p>{{ .description | markdownify }}</p>
                    <nav class="flex flex-col gap-2">
                      {{ range .links }}
                        <div>
                          <span class="icon-svg text-gray dark:text-gray"
                            >{{ partial "icon" "arrow_right" }}</span
                          >
                          <a class="link" href="{{ .url }}">{{ .text }}</a>
                        </div>
                      {{ end }}
                    </nav>
                  </div>
                </div>
              </div>
            {{ end }}
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <h2 class="mb-4 text-xl">Browse by tag</h2>
          <div class="flex flex-wrap gap-4">
            {{ $tags := slice }}
            {{- range site.Taxonomies.tags }}
              {{ $tags = $tags | append .Page }}
            {{ end }}
            {{ partial "tags.html" $tags }}
          </div>
        </div>
      </div>

      <div
        class="relative flex h-full items-center justify-center overflow-hidden bg-gray-100 py-8 md:h-[334px] dark:bg-gray-900"
      >
        <div class="w-[1200px] px-4">
          <div class="flex max-w-full flex-col gap-8 md:max-w-[66%]">
            <h2 class="text-2xl">Community resources</h2>
            <p>
              Find fellow Docker enthusiasts, engage in insightful discussions,
              share knowledge, and collaborate on projects. Our communities
              offer a rich online experience for developers to create valuable
              connections that challenge and inspire!
            </p>
            <div class="flex flex-col gap-4 md:flex-row">
              <a
                href="https://forums.docker.com/"
                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
              >
                Visit Docker Forum
              </a>
              <a
                href="https://dockr.ly/comm-slack"
                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
              >
                Join Docker Slack
              </a>
              <a
                href="https://www.docker.com/community/captains/"
                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
              >
                Find your Docker Captain
              </a>
            </div>
          </div>
        </div>
        <div class="absolute top-0 right-0 hidden md:block">
          {{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
        </div>
      </div>
    </main>
    <footer>{{ partialCached "footer.html" . }}</footer>
  </body>
</html>
